<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>气象站数据展示</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/qxz.js"></script> 
		
		<link rel="stylesheet" href="css/default_style_qixiang.css" />
		<link rel="stylesheet" href="css/index.css" />
		
	</head>
	
	<body ng-app="zth" ng-controller="qxzController" >  
		<div id="main"> 
			<div id="header">
				<div class="title-big cen ">
					实时气象数据监测
				</div>
				<div class="title-time cen ">
					{{time}}
				</div>
			</div>
			
			<div id="link">
				<div class="link-left ">
					<p>连接状态：<span id="conn1" class="ling-on">等待连接</span><span id="conn2" class="ling-on"><font color="#00DCFF">{{start}}</font></span></p>
					<p>工作电压：<span id="work1" class="ling-on">无</span><span id="work2" class="ling-on"><font color="#00DCFF">{{qxz.dianya}}</font></span></p>
					<p>获取时间：<span id="get1" class="ling-on">无</span><span id="get2" class="ling-on"><font color="#00DCFF">{{qxz.time}}</font></span></p>
				</div>
				<div class="link-right">
					<input class="a-btn cen" id="full" type="button" style="display:inline" onclick="fullScreen()" value="全屏显示">
					<input class="a-btn cen" id="exit" type="button" style="display:none" onclick="exitScreen()" value="退出全屏"> 
					<input class="a-btn cen" id="start" type="button" style="display:inline" ng-click="start(selectedSite)" value="打开串口">
					<input class="a-btn cen" id="close" type="button" style="display:none" ng-click="close()" value="关闭串口">
					<select class="a-btn cen" id="select" ng-model="selectedSite" ng-change="initTabelData()" ng-init="findPorts()">
			          	<option value=""  selected="selected">选择串口</option>
						<option ng-repeat="ports in list" value="{{ports}}" >{{ports}}</option>
					</select> 
				</div>
				<div class="clear"></div>
			</div>
			 
			<div id="wrap">
				<div class="wrap-list">
					<div class="wrap-list-l">
						<div class="list-con"><img src="img/img_fengxiang.png"></div>
						<div class="list-text1">
							<p style="font-size: 30px;color: #fff;padding-bottom:20px;"></p>
							<p> <span id="fx1" class="digital">-/-</span> <span id="fx2" class="digital"></span><span class="unit">°</span></p>
							<p class="text-info">风向</p>
						</div>
					</div>
					<div class="wrap-list-r">
						<div class="list-con"><img src="img/img_fengsu.png"></div>
						<div class="list-text1">
							<p style="font-size: 30px;color: #fff;padding-bottom:20px;"></p>
							<p> <span id="fs1" class="digital">-/-</span> <span id="fs2" class="digital"></span><span class="unit">m/s</span></p>
							<p class="text-info">风速</p>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="wrap-list">
					<div class="wrap-list-l">
						<div class="list-con"><img src="img/img_wendu.png"></div>
						<div class="list-text">
							<p> <span id="wd1" class="digital">-/-</span> <span id="wd2" class="digital">{{qxz.wendu}}</span><span class="unit">℃</span></p>
							<p class="text-info">温度</p>
						</div>
					</div>
					<div class="wrap-list-r">
						<div class="list-con"><img src="img/img_shidu.png"></div>
						<div class="list-text">
							<p> <span id="sd1" class="digital">-/-</span> <span id="sd2" class="digital">{{qxz.shidu}}</span><span class="unit">%RH</span></p>
							<p class="text-info">湿度</p>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="wrap-list">
					<div class="wrap-list-l">
						<div class="list-con"><img src="img/img_qiya.png"></div>
						<div class="list-text">
							<p> <span id="qy1" class="digital">-/-</span> <span id="qy2" class="digital">{{qxz.qiya}}</span><span class="unit">hpa</span></p>
							<p class="text-info">气压</p>
						</div>
					</div>
					<div class="wrap-list-r">
						<div class="list-con"><img src="img/img_yuliang.png"></div>
						<div class="list-text">
							<p> <span id="yl1" class="digital">-/-</span> <span id="yl2" class="digital">{{}}</span><span class="unit">mm</span></p>
							<p class="text-info">雨量</p>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div> 
	</body>
</html>